<template>
  <div id="example-1" class='bg-light'>
    <p>The window width and height are respectively {{width}}, {{height}}</p>
  </div>
</template>

<script>
  import http from '@/utils/Http';
  // import animated from 'animate.css'
  // import animate from 'animate.css';
  export default {
    data: () => ({
      width: document.documentElement.clientWidth,
      height: document.documentElement.clientHeight
    }),
    mounted() {
      // window.addEventListener('resize', this.getDimensions);
      window.addEventListener('resize', this.say);
    },
    unmounted() {
      window.removeEventListener('resize', this.getDimensions);
    },
    methods: {
      say: function getDimensions() {
        this.width = document.documentElement.clientWidth;
        this.height = document.documentElement.clientHeight;
        console.log("resize")
      },
    }
  }
</script>

<style scoped>
</style>
